<template>
	<view class="page">
<!-- 轮播图 -->
		<view class="swipercontain">
			<swiper  :autoplay="true" :interval="2000" :duration="1000" :circular="true">
				<swiper-item v-for="(item,index)  in images">
					<view class="swiper-item">
						<image :src="item.image" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
<!-- 热门电影 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="/static/hot.png" mode=""></image>
				<view class="">
					热门电影
				</view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="page-block hot-scorll">
			<view class="single-poster" v-for="(item,index) in hotmovies " :key="item.id"> 
				<view class="poster-wapper">
					<image :src="item.cover" class="poster"></image>
					<view class="movie-name">
						{{item.name}}
					</view>
					<rankstar :innerscore="item.score" :showNum="0"></rankstar>
				</view>
				
			</view>
		</scroll-view>
<!-- 热门预告 -->
			<view class="page-block super-hot">
						<view class="hot-title-wapper">
							<image src="/static/wait.png" mode=""></image>
							<view class="">
								热门预告
							</view>
						</view>
			</view>
			<view class="hot-movies page-block">
				<video :src="item.trailer" 
				:poster="item.poster" 
				controls v-for="(item,index) in trailerlist" 
				:key="item.id"
				:id="item.id"
				@play="playmovie(item.id)"></video>
			</view>
<!-- 猜你喜欢 -->
			<view class="page-block super-hot">
						<view class="hot-title-wapper">
							<image src="/static/like.png" mode=""></image>
							<view class="">
								猜你喜欢
							</view>
						</view>
			</view>
			<view class="page-block guess-u-like">
				<view class="single-like" v-for="(item,index) in likelists" :key="item.id">
					<image :src="item.cover" class="bigimg"></image>
					
					<view class="desc">
						<view class="title">
							{{item.name}}
						</view>
						<view class="">
							<rankstar :innerscore="item.score"></rankstar>
						</view>
						<view class="desc-item">
							{{item.basicInfo}}
						</view>
						<view class="time">
							{{item.releaseDate}}
						</view>
					</view>
					<view class="uplike">
						<view class="up-contain" >
							<image src="../../static/uplike.png" class="upimg"  @click="praisme(index)"></image>
							<view class="up-text">
								赞一下
							</view>
							<view class="up-text animation-opacity" :animation="animationDataArr[index]">
								+1
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import common from "../../common/common.js"
	import rankstar from '../../components/rankstar.vue'
	export default {
	    data() {
	        return {
	           images: [],
			   hotmovies:[],
			   trailerlist:[],
			   animationData:{},
			   likelists:[],
			   animationDataArr:[{},{},{},{},{}]
	        }
	    },
		onUnload() {
			//页面卸载的时候，清除动画数据
			this.animationData = {},
			this.animationDataArr=[{},{},{},{},{}]
		},
		onLoad() {
			// 在页面创建的时候，创建一个临时动画
			// #ifdef APP-NVUE || MP-WEIXIN
			this.animation = uni.createAnimation()
			// #endif
			
			this.getcarouseldata()
			this.gethotmovies()
			this.getvideomovies()
			this.getlikelist()
		},
			
		components:{
			rankstar
		},
		onPullDownRefresh() {
			this.getlikelist()	
			uni.showLoading({
				title:"加载中...",
				mask:true
			})
			setTimeout(()=>{
				uni.stopPullDownRefresh();
				uni.hideLoading();
			},2000)
		},
		onHide() {
			if(this.videoContext){
				this.videoContext.pause()
			}
		},
	    methods:{
			
	      getcarouseldata(){
					console.log(common)
			  		uni.request({
			  				url:common.serverUrl+'/index/carousel/list',
			  				method: "POST",
			  				header:{
			  					'content-type':'application/x-www-form-urlencoded'
			  				},
			  				data:{
			  					qq:'466481615'
			  				},
			  				success:(res) => {
			  					console.log(res.data);
			  					this.images = res.data.data
			  				}	
			  				
			  			})
						},
			
		  gethotmovies(){
			uni.request({
				url:common.serverUrl+'/index/movie/hot?type=superhero',
				method:"POST",
					
				success:(res)=>{
					console.log(res.data)
					this.hotmovies = res.data.data
				}
			})
		},
		getvideomovies(){
			uni.request({
				url:common.serverUrl+'/index/movie/hot?type=trailer',
				method:"POST",			
				success:(res)=>{
					console.log(res.data)
					this.trailerlist= res.data.data
				}
			})
		
	},
		playmovie(index){
			this.videoContext = uni.createVideoContext(index)
			var lists = this.trailerlist
			for(let i = 0 ; i<lists.length ; i++){
				var tempId = lists[i].id
				if(tempId!=index){
					uni.createVideoContext(tempId).pause()
				}
			}
			
				
		},
	
		praisme(index){
			// #ifdef APP-PLUS || MP-WEIXIN
			this.animation.translateY(-100).opacity(1).step({duration:400});
			//导出动画数据到view组件，实现组件的动画效果
			this.animationData = this.animation
			this.animationDataArr[index] = this.animationData.export();
			//还原动画
			setTimeout(function(){
				this.animation.translateY(0).opacity(0).step({duration:0});
				// this.animationData = this.animation.export()
				this.animationData = this.animation
				this.animationDataArr[index] = this.animationData.export();
			}.bind(this),500)
			// #endif
		},
			
		getlikelist(){
			uni.request({
				url:common.serverUrl+'/index/guessULike',
				method:"POST",	
				success:(res)=>{
					console.log(res.data.data)
					this.likelists = res.data.data
				}
			})
		}
	}
	}
</script>

<style>	
	@import url("./index.css")
</style>
